<%@page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>
<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/sectionparent.css" source="widget" />
<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/admin.css" source="widget" />
<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/new-add-goods.css" source="widget" />
<style>
    select {
        padding-left: 4px;
        font-size: 10px;
        border-radius: 10px;
        background-image: none;
        border: 1px solid #dadada;
        color: #8b8b8b;
    }

    .checkTitle ul li {
        color: #565252;
        font-size: 14px;
        float: left;
    }

    .checkTitle ul li  a:active {
        border-right: 1px solid #CBD5DD;
        padding: 2px 15px 12px 15px;
        border-top: 1px solid #cbd5dd;
    }

    .checkTitle li.active {
        border-color: #CBD5DD !important;
        border-bottom-color: #fff !important;
    }

    .btn_addPic {
        display: inline-block;
        position: relative;
        height: 41px;
        overflow: hidden;
        padding: 0 20px;
        border: 1px solid #EBEBEB;
        background: none repeat scroll 0 0 #F9C771;
        color: #fff;
        font: 14px/39px 'MicroSoft Yahei', 'Simhei';
        cursor: pointer;
        text-align: center;
        margin-top: 20px;
        margin-left: 20px;
        width: 140px;
    }

    .inputClass {
        height: 30px;
        width: 200px;
        margin-left: 20px;
        margin-top: 25px;
        border: 1px solid #CBD5DD;
        text-indent: 10px;
        float: left;
    }

    .addorcancleAttr {
        width: 45px;
        height: 25px;
        margin-left: 10px;
        padding-top: 5px;
        padding-left: 10px;
        background-color: #F9C771;
        color: white;
        cursor: pointer;
        float: left;
        margin-top: 26px;
    }
    .emStyle {
        color: #7da4cc;
        line-height: 43px;
        margin-left: -12px;
        margin-top: 7px;
    }
    .current-pic{
	position:absolute;
	bottom:0px;
	left:0;
}
 .wrap-box{
 	position:relative;
 	overflow:hidden;
 	height:31px;
 }
</style>
<div style="top:130px;position:fixed;height:30px;font-size: 14px;font-family: '微软雅黑';margin-left:-236px;"> 当前位置：${sessionScope.currcent_position}</div>
    <section style="margin-top:16px;">
        <div class="panel panel-default">
            <c:if test="${type == 1 }">
                <div class="forword_area"></div>
                <div class="location">新增商品信息</div>
             </c:if>
             <c:if test="${type == 2 }">
                <div class="forword_area"></div>
                <div class="location">编辑商品信息</div>
             </c:if>
         </div>
              <div style="height:30px;line-height:30px;margin-bottom:17px;overflow:hidden">
              	
                    <div style="float:left;height: 31px;width:120px;color:#808080;font-size:14px;wcursor: pointer;"onclick="gotoGoodsInfo(this)">
                    	<div class="wrap-box">
		                    <input type="hidden" value="0"/>
		                    <img id="selected1" src="${ctx}/images/seller/coupon/select_yellow.png" style="margin-right:15px;margin-top:-4px;" >
		                    <a >商品信息</a>
		                    <img id="selectedOne"  class="current-pic"src="${ctx}/images/seller/coupon/currpic.png">
	                    </div>
                   </div>
                    <div style="float:left;height: 31px;width:120px;color:#808080;font-size:14px;cursor: pointer;" onclick="gotoGoodsDescrip(this)">
                      	<div class="wrap-box">
                      	<input type="hidden" value="1"/>
                    	<img id="selected2" src="${ctx}/images/seller/coupon/select_blue.png" style="margin-right:15px;margin-top:-4px;">
                    	 <a >商品简介</a>
                    	<img id="selectedTwo" class="current-pic"src="${ctx}/images/seller/coupon/currpic.png">
                    </div>
                    </div>
                    <div style="float:left;height: 31px;width:120px;color:#808080;font-size:14px;cursor: pointer;" onclick="gotoGoodsSpec(this)">
                     	<div class="wrap-box">
                     	<input type="hidden" value="2"/>
                    	<img id="selected3" src="${ctx}/images/seller/coupon/select_blue.png" style="margin-right:15px;margin-top:-4px;" >
                    	<a >商品规格</a>
                    	<img id="selectedThree" class="current-pic"src="${ctx}/images/seller/coupon/currpic.png">
                    </div>
                    </div>
                
                </div><!--end 搜索栏 -->    
         
                <div id="goodsInfo" class="form" style="min-height:350px;border: 1px solid #dadada;">
                    <div class="itemEditMap" style="height:160px;margin-left: -100px;">
                        <input id="goodsId" type="hidden" value="${goodsInfo.id }">
                        <input id="imageLogo" type="hidden" value="${goodsInfo.logo }">
                        <span class="col-sm-1 editlableEditMap" style="height:160px;line-height: 160px;">图片缩略图：</span>
                        <div class="flEditMap" style="margin-top:30px;">
                        
                            <c:if test="${goodsInfo.logo == null || goodsInfo.logo == ''}">
                                    <img id="preview3" style="width:100px;height:100px;border-radius:14px;float:left;" title="快上传小区头像吧" src="${ctx}/images/seller/common/defaultgoods.jpg" />
                            </c:if>
                            <c:if test="${goodsInfo.logo != null && goodsInfo.logo != ''}">
                                <img id="preview3" style="width:100px;height:100px;border-radius:14px;float:left;" src="${sessionScope.image_logo}${goodsInfo.logo}" />
                            </c:if>
                            <div class="mtjxsa" style="float:left;margin-top: 28px;">
                                  <p style="text-align: left" id="imageBtn">
                                      <input type="hidden" name="imageLogoUrl" id="imageLogoUrl" />
                                      <img style="margin-left:23px;margin-top: -5px;" src="${ctx}/images/seller/goods/tip.png"/>
                                      <span style="color:#262535;font-size:14px;">提示：只能上传.jpg, .png的图片格式,照片文件大小最大为10MB</span>
                                  </p>
                                  <div>
                                      <div class="fl" style="margin-left:25px;">
                                          <button style="width:100px;height:30px;background-color: #F9C771;border-radius: 4px;color: #fff;margin-top: 10px;border: 0px;" class="acblu tctpsc">上传图片</button>
                                      </div>
                                  </div>
                              </div>
                            <%@include file="/views/common/uploader/picture.jsp" %>
                        </div>
                    </div>
                    <div class="itemEdit" style="margin-left: -100px; margin-top: 5px;">
                        <input id="goodsId" type="hidden" value="${goodsInfo.id }">
                        <span class="col-sm-1 editlableEdit" style="display: block;"><em class="emStyle">*</em>&nbsp;商品名称：</span>
                        <div class="flEdit">
                            <input class="controlEdit" id="goodsName" value="${goodsInfo.name }" type="text"  class="text"
                            onblur="checkGoodsName()" maxlength="20" placeholder="请输入名称"/>
                        </div>
                    </div>
                    <div class="itemEdit" style="margin-left: -100px;">
                        <span class="col-sm-1 editlableEdit"><em class="emStyle">*</em>&nbsp;商品分类：</span>
                        <div class="flEdit" style="width:56%;">
                            <select id="firstCategory" onblur="checkGoodsCategaryOne()" style="height:37px;line-height: 37px;width:251px;margin-top: 6px;font-size: 12px;">  
                                  <option value="">--一级分类--</option> 
                                  <c:forEach items="${firstCategory}" var="firstItem" varStatus="status">
                                      <c:if test="${firstItem.id == goodsCategory.parentId}">
                                          <option id="${firstItem.name}" value="${firstItem.id}" selected>
                                              ${firstItem.name}
                                          </option>
                                      </c:if>
                                      <c:if test="${firstItem.id != goodsCategory.parentId}">
                                          <option id="${firstItem.name}" value="${firstItem.id}">
                                              ${firstItem.name}
                                          </option>
                                      </c:if>
                                  </c:forEach>
                              </select>
                            <select id="secondCategory" onblur="checkGoodsCategaryTwo()" style="height:37px;line-height: 37px;width:252px;font-size: 12px;margin-left: 30px;">
                                   <option value="">--二级分类--</option>
                                   <c:if test="${not empty secondCategory}">
                                       <c:forEach items="${secondCategory}" var="secondItem" varStatus="status">
                                          <c:if test="${secondItem.id == goodsInfo.goodsCategoryId}">
                                              <option id="${secondItem.name}" value="${secondItem.id}" selected>
                                                  ${secondItem.name}
                                              </option>
                                          </c:if>
                                          <c:if test="${secondItem.id != goodsInfo.goodsCategoryId}">
                                          <option id="${secondItem.name}" value="${secondItem.id}">
                                              ${secondItem.name}
                                          </option>
                                      </c:if>
                                      </c:forEach>
                                   </c:if>
                               </select>
                        </div>
                    </div>
                    <div style="width:100%;height:50px;margin-left: -78px;">
                        <div id="price1" style="float:left;width:45%;height: 50px;line-height: 50px;">
                            <span class="editlableEdit" style="margin-left:24%;"><em class="emStyle">*</em>&nbsp;商品价格：</span>
                            <input id="businessPrice" class="controlEdit" style="margin-left: 20px;width:40%;"
                             onblur="checkPrice()" onkeyup="checInputNum(this)" value="${goodsInfo.price }" type="number"  class="text" maxlength="20" placeholder="请输入商家商品价格"/>
                        </div>
                        <div style="float:left;width:40%;height: 50px;line-height: 50px;">
                            <span style="height:50px;line-height: 50px;font-size:14px;font-family: '微软雅黑';margin-left: 44px;"><em class="emStyle">*</em>&nbsp;市场价：</span>
                            <input id="marketPrice" class="controlEdit" style="margin-left: 20px;width:47%;" type="number" 
                             onblur="checkMarketPrice()" onkeyup="checInputNum(this)" maxlength="50" value="${goodsInfo.marketPrice}">
                        </div>
                    </div>
                    <div class="itemEdit" style="margin-left: -100px;">
                        <span class="col-sm-1 editlableEdit"><em class="emStyle">*</em>&nbsp;库存：</span>
                        <div class="flEdit">
                            <input class="controlEdit" type="text" maxlength="20" id="stockAmount" type="text" onblur="checkStockAmount()" onkeyup="checInputNumOnly(this)" value="${goodsInfo.stock}"  placeholder="请输入商家商品库存">
                        </div>
                    </div>
                    <div class="itemEdit" style="margin-left: -100px;">
                        <span class="col-sm-1 editlableEdit"><em class="emStyle">*</em>&nbsp;单位：</span>
                        <div class="flEdit">
                            <input  class="controlEdit" id="unit" type="text" onblur="checkUnit()" maxlength="50" value="${goodsInfo.unit}">
                        </div>
                    </div>
                    <div class="itemTextArea" style="margin-left: -100px;">
                        <span class="col-sm-1 editlableTextArea">关键字：</span>
                        <div >
                            <textarea class="controlTextArea" id="keyword" rows="4" type="text" maxlength="200" placeholder="请输入商品搜索关键字，多个请用,分隔">
                                ${keyword}
                            </textarea>
                        </div>
                    </div>
                    <div style="width:100%;height:50px;margin-left: -78px;">
                        <div style="float:left;width:45%;height: 50px;line-height: 50px; margin-top: -18px;">
                            <span class="editlableEdit" style="margin-left:24%;">推荐等级：</span>
                            <input  class="controlEdit" style="margin-left: 20px;width:40%;" id="recommendLevel" type="number" 
                             onblur="checkRecommendLevel()" maxlength="50" value="${goodsInfo.isRecommend}">
                        </div>
                       <%--  <div style="float:left;width:40%;height: 50px;line-height: 50px;margin-top: -18px;">
                            <span style="height:50px;line-height: 50px;font-size:14px;font-family: '微软雅黑'">&nbsp;&nbsp;&nbsp;&nbsp;排序：</span>
                            <input  class="controlEdit" style="margin-left: 20px;width:47%;" id="sort" type="number"
                            maxlength="50" value="${goodsInfo.sort}">
                        </div> --%>
                    </div>
                    <div class="itemEdit" style="height:200px;margin-left: -100px;">
                        <span class="col-sm-1 editlableEdit" style="height:200px;line-height: 200px;margin-top: -30px;">商品图片：</span>
                        <div style="margin-top: 20px;float: left;margin-left: 20px;width:77%;">
                            <input id="imgLength" type="hidden" value="${fn:length(imgs)}">
                            <div id="imgArea" style="float:left;">
                                <c:if test="${fn:length(imgs) > 0}">
                                    <c:forEach items="${imgs}" var="item" varStatus="status">
                                        <div id="delete${item.url}" style="float:left;" onmouseover="showdelete(this);" onmouseout="hidedelete(this);">
                                            <input id="imgId${status.index+1}" type="hidden" value="${item.url}">
                                            <img id="imgPic${item.url}" width="100px" height="100px;" style="border-radius: 14px;float:left;margin-right:10px;" src="${sessionScope.image_logo}${item.url}">
                                            <span class="deletegoods" onclick="deletePic(this);" style="display: none;"><img title="删除图片" src="${ctx}/images/seller/goods/deletegoods.png"/></span>
                                        </div>
                                    </c:forEach>
                                </c:if>
                            </div>
                            <div class="uploadergoods" style="float:left;">
                                <div class="acblu banner">
                                    <a><img style="width:50px;height:50px;float:left;padding: 15px 0px 0px 25px;" title="上传商品图片" src="${ctx}/images/seller/goods/uploader.png" />
                                    </a>
                                    <br>
                                    <div style="padding-top: 4px;width: 100px;float: left;text-align: center;color: #fff;font-size: 14px;">上传</div>
                                </div>
                            </div>
                        </div>
                        <div class="mtjxsa" style="float:left;margin-top: 40px;">
                                  <p style="text-align: left" id="imageBtn">
                                      <input type="hidden" name="imageLogoUrl" id="imageLogoUrl" />
                                  </p>
                              </div>
                            <%@include file="/views/common/uploader/picture.jsp" %>
                    </div>
            <div class="foot">
                <div style="float:left;margin-left:40%;">
                    <button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
                </div>
                <div style="float:left;padding-left:5%;">
                    <button class="buttonEdit" onclick="gotoGoodsDescrip()">下一步</button>
                </div>
            </div>
    </div>
                    <div id="goodsDescrip" style="display: none;">
                            <div style="height:40px;line-height: 40px;background-color: #f5f5f5;border:1px solid #dadada;font-weight: bold;padding-left: 20px;">商品描述：</div>
                            <div style="height:auto;">
                                <div id="ueditor">
                                    
                                    <!-- 加载编辑器的容器 -->
                                    <script id="container" type="text/plain">${goodsInfo.detail }</script>
                                    <!-- 配置文件 -->
                                    <script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.config.js"></script>
                                    <!-- 编辑器源码文件 -->
                                    <script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.all.js"></script>
                                    <script type="text/javascript" src="${ctx }/js/lib/ueditor/ueditor.parse.js"></script>
                                    <!-- 实例化编辑器 -->
                                    <script type="text/javascript">
            
            
                                    var ue = UE.getEditor('container',{
                                        toolbars : [
                                                         ['fontfamily','fontsize', '|', 'blockquote', 'horizontal', '|', 'removeformat', '|', 'insertimage'],
                                                         ['bold', 'italic', 'underline', 'forecolor', 'backcolor', '|',
                                                          'justifyleft', 'justifycenter', 'justifyright', '|',
                                                          'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                                                          'insertorderedlist', 'insertunorderedlist', '|',
                                                          'imagenone', 'imageleft', 'imageright', 'imagecenter','autotypeset','cleardoc','source'
                                                          ]
                                                       ],
                                        UEDITOR_HOME_URL: '${ctx}/js/lib/ueditor/',
                                        serverUrl: '${ctx}/fileHandler/upLoaderMergeForUeditor',
                                        //imageUrlPrefix: '${ctx}/fileHandler/getFileForUeditor?fileName=',
                                        imageUrlPrefix: '${sessionScope.image_logo}',
                                        imageActionName: 'uploadimage',
                                        imageFieldName: 'file',
                                        imageMaxSize: 1024000,
                                        imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif'],
                                        initialFrameHeight: 200,
                                        initialFrameWidth: '99.8%',
                                        elementPathEnabled: false,
                                        retainOnlyLabelPasted:true,
                                        wordCount: false,
                                        /* sourceEditor: 'textarea', */
                                        insertorderedlist: {
                                            // 系统自带
                                            'decimal': '',     // '1,2,3...'
                                            'lower-alpha': '', // 'a,b,c...'
                                            'lower-roman': '', // 'i,ii,iii...'
                                            'upper-alpha': '', // 'A,B,C'
                                            'upper-roman': ''  // 'I,II,III...'
                                        },
                                        insertunorderedlist : {
                                            // 系统自带
                                            'circle': '',  // '○ 小圆圈'
                                            'disc': '',    // '● 小圆点'
                                            'square': ''   // '■ 小方块'
                                        },
                                        listDefaultPaddingLeft: '50'
                                    });
                                        </script>
                            </div>
                    </div>
                    <div style="height:50px;border:1px solid #dadada;padding-top:15px;margin-top: -1px;">
                        <div style="float:left;margin-left:40%;">
                            <button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
                        </div>
                        <div style="float:left;padding-left:5%;">
                            <button class="buttonEdit" onclick="gotoGoodsSpec();">下一步</button>
                        </div>
                    </div>
                </div>
                
                <div id="goodsSpec" style="display: none;">
                <div style="background-color: #fff;border:1px solid #dadada;">
                    <!--新增自定义属性  -->
                    <div>
                        <div >
                            <div style="background-color: #F5F5F5;border-bottom: 1px solid #dadada;">
                                <img style="margin-left:23px;margin-top: -5px;" src="${ctx}/images/seller/goods/goodsinfo.png"/>
                                <span style="height:45px;line-height: 45px;padding-left:13px;font-family: '微软雅黑';">商品规格</span>
                            </div>
                            <div style="background-color: #fff;height:80px;">
                                <a href="javascript:void(0);" onclick="showDefineAttr();" class="btn_addPic"><img width="21px;" style="margin-top:-2px;" src="${ctx}/images/seller/goods/addAttr.png" />
                                    <span>新增自定义属性</span>
                                </a>
                                <a href="javascript:void(0);" onclick="appendRow();" class="btn_addPic"><img width="21px;" style="margin-top:-2px;" src="${ctx}/images/seller/goods/addAttr.png" />
                                    <span>新增规格</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div id="defineAttr" style="display: none;">
                        <div style="background-color: #F5F5F5;">
                            <img style="margin-left:23px;margin-top: -5px;" src="${ctx}/images/seller/goods/goodsinfo.png"/>
                            <span style="height:45px;line-height: 45px;padding-left:13px;font-family: '微软雅黑';">新增自定义属性</span>
                            <div style="background-color: #fff;height:80px;">
                                <input class="inputClass" type="text" id ="attr_name" class="text" maxlength="20" placeholder="请填写属性名称"/>
                                <div class="addorcancleAttr" onclick="appendCloumn();">新增</div>
                                <div class="addorcancleAttr" onclick="hideDefineAttr();">取消</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <c:if test="${type == 1 }">
                    <div class="add-newattr">
                        <table id="attr_spec" style="display:none">
                            <tr style="height: 40px;">
                                <td class="bg-td" width="150px" style="color:black;font-size: 15px;">价格</td>
                                <td class="bg-td" width="150px" style="color:black;font-size: 15px;">库存</td>
                                <td class="bg-td" width="100px" style="color:black;font-size: 15px;">操作</td>
                            </tr>
                        </table>
                    </div>
                </c:if>
               <c:if test="${type == 2 }">
                     <div class="add-newattr">
                        <table id="attr_spec">
                            <tr style="height: 40px;">
                                <c:forEach items="${attrNames}" var="attrName" varStatus="attrNameStatus">
                                    <td class="bg-td" width="150px" style="color:black;font-size: 15px;">${attrName}<img id='close' src='images/remove.png' onclick='delete_cloum(this);' ></td>
                                </c:forEach>
                                <td class="bg-td" width="150px" style="color:black;font-size: 15px;">价格</td>
                                <td class="bg-td" width="150px" style="color:black;font-size: 15px;">库存</td>
                                <td class="bg-td" width="100px" style="color:black;font-size: 15px;">操作</td>
                            </tr>
                            <c:forEach items="${goodsSpecList}" var="specInfo" varStatus="specInfoStatus">
                                <tr>
                                    <c:forEach items="${specInfo.goodsSpecificationAttrs}" var="attrInfo" varStatus="attrInfoStatus">
                                        <td ><input type="text" class="add-input" value="${attrInfo.attrValue}"></td>
                                    </c:forEach>
                                    <td><input type="text" name="price" onkeyup="checInputNum(this)" class="add-input" value="${specInfo.price}"/></td>
                                    <td><input type="text" maxlength="20" name="stock" onkeyup="checInputNumOnly(this)" class="add-input" value="${specInfo.stock}"/>
                                        <input type="hidden" name="specId" value="${specInfo.id}"/>
                                    </td>
                                    <td><img id='close' src='images/delete_green.png' onclick='deleteRow(this);' style="margin-right:53px;"></td>
                                </tr>
                            </c:forEach>
                        </table>
                    </div>
                </c:if>
                <div>
                    <div id="goodsSpecification" style="margin:0px 20px;"></div>
                    <div class="foot" style="border: 1px solid #dadada;padding:25px 0 5px 0;">
                        <div style="float:left;margin-left:40%;">
                        <button class="buttonEdit" onclick="saveGoodsInfo();">保&nbsp;&nbsp;存</button>
                        </div>
                        <div style="float:left;padding-left:1%;margin-left: 1%;">
                         <button class="buttonCancle" onclick="cancel();">取&nbsp;&nbsp;消</button>
                        </div>
                    </div>
                </div>
                </div>
        </section>
        <script src="${ctx}/js/controllers/goods/GoodsInfoEditController.js" type="text/javascript"></script>
        <script type="text/javascript">
        var ctx = '${ctx}';
        setCtx(ctx);
    </script> 
    <!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
    <script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
